<!-- diy -->
<template>
  <div class="login-content-index">
    <div class="header">
      <!-- <img src="@/static/style/Group 8@2x.png" alt /> -->
      <div class="right">加油站营销管理系统</div>
    </div>
    <div class="cont">
      <div class="panel">
        <div class="left">
          <div class="progressive">
            <el-carousel trigger="click" height="600px">
              <el-carousel-item v-for="item in imgData" :key="item">
                <img :src="item" />
              </el-carousel-item>
            </el-carousel>
            <!-- <img v-progressive="bginmg.provise" :src="bginmg.src" alt=""> -->
          </div>
        </div>
        <div class="right">
          <div class="login-cont">
            <!-- 登录 -->
            <template v-if="loginRegister">
              <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="false">
                <el-tab-pane label="密码登录" name="1">
                  <el-input placeholder="请输入账号" v-model="loginForm.mobile">
                    <svg-icon slot="prefix" icon-class="phoneNum"></svg-icon>
                  </el-input>
                  <el-input
                    placeholder="请输入密码"
                    v-model="loginForm.password"
                    :type="showPass?'password':'text'"
                  >
                    <svg-icon slot="prefix" icon-class="pass-word"></svg-icon>
                    <i
                      slot="suffix"
                      class="el-input__icon el-icon-view"
                      @click="showPass = !showPass"
                    ></i>
                  </el-input>
                  <el-input
                    placeholder="请输入员工ID"
                    type="text"
                    v-model="loginForm.empno"
                  >
                    <svg-icon slot="prefix" icon-class="id"></svg-icon>
                  </el-input>
                </el-tab-pane>
                <el-tab-pane label="短信登录" name="2">
                  <el-input placeholder="请输入账号" v-model="loginForm.mobile">
                    <svg-icon slot="prefix" icon-class="phoneNum"></svg-icon>
                  </el-input>
                  <div class="verification-code">
                    <el-input placeholder="请输入验证码" v-model="loginForm.code" style="width:190px">
                      <svg-icon slot="prefix" icon-class="pass-word"></svg-icon>
                    </el-input>
                    <el-button
                      type="primary"
                      round
                      plain
                      style="width:125px"
                      @click="getCode"
                    >{{verification}}</el-button>
                  </div>
                  <el-input
                    placeholder="请输入员工ID"
                    type="text"
                    v-model="loginForm.empno"
                  >
                    <svg-icon slot="prefix" icon-class="id"></svg-icon>
                  </el-input>
                </el-tab-pane>
              </el-tabs>
            </template>

            <template v-else>
              <!-- 注册 -->
              <el-tabs v-model="activeNameTwo" :stretch="false" class="register">
                <el-tab-pane label="注册" name="1">
                  <el-input placeholder="请输入账号" v-model="registers.mobile">
                    <svg-icon slot="prefix" icon-class="phoneNum"></svg-icon>
                  </el-input>
                  <el-input
                    placeholder="请输入密码"
                    v-model="registers.password"
                    :type="showPass?'password':'text'"
                  >
                    <svg-icon slot="prefix" icon-class="pass-word"></svg-icon>
                    <i
                      slot="suffix"
                      class="el-input__icon el-icon-view"
                      @click="showPass = !showPass"
                    ></i>
                  </el-input>
                  <div class="verification-code">
                    <el-input placeholder="请输入验证码" v-model="registers.code" style="width:190px">
                      <svg-icon slot="prefix" icon-class="pass-word"></svg-icon>
                    </el-input>
                    <el-button
                      type="primary"
                      round
                      plain
                      style="width:125px"
                      @click="getCode"
                      :disabled="num==0?false:true"
                    >{{verification}}</el-button>
                  </div>
                  <div class="verification-code">
                    <el-input
                      placeholder="请输入邀请码"
                      v-model="registers.InvitationCode"
                      style="width:190px"
                    >
                      <i slot="prefix" class="el-icon-message"></i>
                    </el-input>
                    <el-button
                      type="primary"
                      round
                      plain
                      style="width:125px"
                      @click="getInvitaCode"
                    >获取邀请码</el-button>
                  </div>
                  <div class="registers-hint">如果没有邀请码，请联系客服获取</div>
                </el-tab-pane>
              </el-tabs>
            </template>
            <el-button type="primary" round @click="login" v-if="loginRegister">登录</el-button>
            <el-button type="primary" round @click="postRegister" v-else>注册</el-button>
            <div class="to-regiseter">
              <span @click="loginRegister = false, showPass = true" v-if="loginRegister">立即注册</span>
              <span @click="loginRegister = true, showPass = true" v-else>已有账号，去登录</span>
            </div>
          </div>
        </div>
        <!-- 扫码登陆 -->
        <el-dialog :visible.sync="showCode" width="300px" :modal-append-to-body="false">
          <div class="code_box">
            <img src="../../assets/config_images/yqmewm.jpg" alt />
          </div>
        </el-dialog>
      </div>
    </div>
    <Copyright />
  </div>
</template>

<script>
import { getApplyList, initApply } from "@/api/apply";
import { mapActions, mapGetters } from "vuex";
import { register, getCode } from "@/api/user";
import Copyright from "@/components/Copyright/index";

export default {
  data() {
    return {
      activeName: "1",
      activeNameTwo: "1",
      bginmg: {
        src: require("@/static/style/mohu.jpg"),
        provise: require("@/static/style/qingxi.jpg")
      },
      imgData: [
        require("../../static/style/loginLeftImg_1.png"),
        require("../../static/style/loginLeftImg_2.png"),
        require("../../static/style/loginLeftImg_3.png")
      ],
      loginForm: {
        mobile: "",
        password: "",
        code: "",
        type: "1",
        empno: ""
      },
      registers: {
        mobile: "",
        password: "",
        code: "",
        InvitationCode: ""
      },
      showCode: false,
      num: 0,
      verification: "获取验证码",
      loginRegister: true, // 注册或登录
      showPass: true,
      apptoken: "",
      loading: "",
      appRole: ""
    };
  },
  computed: {
    ...mapGetters(['token', 'app_id'])
  },
  components: {
    Copyright
  },
  methods: {
    ...mapActions(["sethttp"]),
    handleClick(tab, event) {
      this.loginForm.type = this.activeName;
    },
    getInvitaCode() {
      this.showCode = true;
    },
    // 判断有没有应用列表
    getAppList() {
      // 获取应用类别
      getApplyList(1, 1).then(res => {
        if (res.code === 200) {
          if (res.data.length > 0) {
            // this.listData = res.data;
            // this.loading.close(); // 关闭加载模态框
            // this.$store.dispatch("user/resetToken") // 清除token
            if (this.appRole === "leader") {
              window.location.href = "http://zdl.58zltc.com?token=" + this.apptoken + "&appid=" + res.data[0].id;
            } else {
              var baseUrl = "http://mobshop.58zltc.com?token=";
              if (localStorage.getItem('baseStatus') === "test") {
                baseUrl = "http://cs1.58zltc.com?token="
              }
              location.href = baseUrl + this.apptoken + "&appid=" + res.data[0].id;
            }
          } else {
            this.gomessage();
          }
        }
      });
    },

    gomessage() {
      initApply(1).then(res => {
        if (res.code === 200) {
          // this.loading.close();
          // this.$store.dispatch("user/resetToken") // 清除token
          var baseUrl = "http://mobshop.58zltc.com?token=";
          if (localStorage.getItem('baseStatus') === "test") {
            baseUrl = "http://cs1.58zltc.com?token="
          }
          location.href =
            baseUrl +
            this.apptoken +
            "&appid=" +
            res.data.app_id;
        }
      });
    },

    postRegister() {
      // 注册

      const { mobile, password, code, InvitationCode } = this.registers;
      if (mobile === "") {
        this.$message("请输入手机号");
      } else if (password === "") {
        this.$message("请输入密码");
      } else if (code === "") {
        this.$message("请输入验证码");
      } else if (InvitationCode === "") {
        this.$message("请输入邀请码");
      } else {
        register(mobile, password, code, InvitationCode).then(res => {
          this.$message.success(res.msg);
          setTimeout(() => {
            // this.loginRegister = true;
            this.showPass = true;
            this.$router.push({
              name: "newUserSelect",
              params: {
                loginInfor: this.registers
              }
            });
          }, 800);
        });
      }
    },

    getCode() {
      var data = {
        mobile: this.loginRegister
          ? this.loginForm.mobile
          : this.registers.mobile
      };
      // 登录验证码
      getCode(data)
        .then(res => {
          this.timer();
        })
        .catch(err => {
          console.log(err);
        });
    },

    login() {
      // 登录
      // this.loading = true;
      console.log("登陆", this.loginForm);
      // return;
      this.$store
        .dispatch("user/userLogin", this.loginForm)
        .then(res => {
          // this.loading = this.$loading({
          //   lock: true,
          //   text: "Loading",
          //   spinner: "el-icon-loading",
          //   background: "rgba(0, 0, 0, 0.7)"
          // });
          this.apptoken = res.app_token;
          // this.$router.push({ path: "prolist?type=1" });
          // this.loading = false;
          this.appRole = res.role;
          this.getAppList();
        })
        .catch(() => {
          // this.loading = false;
        });
    },
    timer() {
      // 验证码倒计时
      var _this = this;
      this.num = 59;
      var timer = setInterval(function() {
        // console.log(_this.num);
        _this.num--;
        _this.verification = "已发送" + "(" + _this.num + ")";
        if (_this.num === 0) {
          _this.verification = "获取验证码";
          clearInterval(timer);
        }
      }, 1000);
    },

    ...mapActions(["setUser"])
  }
};
</script>

<style lang="scss" scoped>
.login-content-index {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: auto;
  background: url("../../assets/config_images/loginBg.png");
  background-size: cover;

  .header {
    height: 60px;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    padding-left: 12%;
    display: flex;
    align-items: center;

    img {
      width: 170px;
      margin: 0px 0 0 40px;
    }
    .right {
      margin-left: 30px;
      font-size: 18px;
      color: #adadad;
      font-style: oblique;
    }
  }
  .cont {
    height: calc(100% - 60px);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;

    .panel {
      background: #fff;
      width: 900px;
      height: 600px;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
      display: flex;

      .left {
        width: 422px;
        img {
          height: 600px;
        }
      }
      .right {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .login-cont {
          width: 330px;
        }

        .el-input {
          margin-bottom: 20px;
        }

        .el-button {
          width: 100%;
          height: 45px;
        }

        .to-regiseter {
          margin-top: 20px;
          color: #409eff;
          text-align: right;
          cursor: pointer;
        }

        .verification-code {
          display: flex;
          justify-content: space-between;
        }

        .registers-hint {
          margin-top: -12px;
          margin-left: 5px;
          margin-bottom: 5px;
          font-size: 12px;
          color: #b7b5b5;
        }
      }
      .code_box {
        width: 100%;
        height: 260px;
        img {
          width: 100%;
          height: 100%;
        }
        // border: 1px solid #333;
      }
      .code_button {
        margin-top: 5px;
        line-height: 20px;
        text-align: center;
      }
    }
  }
}
</style>

<style lang="scss">
.login-content-index {
  .el-tabs__nav {
    width: 100%;
  }
  .el-tabs__item {
    padding: 0;
    width: 50%;
    font-size: 18px;
    text-align: center;
  }

  .el-tabs__header {
    margin-bottom: 20px;
  }

  .el-tabs__active-bar {
    width: 162px !important;
  }

  .el-input__prefix {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-left: 3px;
  }

  .el-input__inner {
    border-radius: 25px;
    height: 45px;
  }

  .register {
    .el-tabs__item {
      width: 100%;
    }

    .el-tabs__active-bar {
      width: 100% !important;
    }
  }
}
</style>
